<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Big Chord</h1>
    <div id="container"></div>
    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
      const NUM_NODES = 10000;
      const NUM_NODES_FIRST_GROUP = Math.round(NUM_NODES * 0.25);

      let model = {
        nodes: [],
        edges: []
      };

      for (let n=0; n<NUM_NODES; n++) {
        model.nodes.push({
          group: n < NUM_NODES_FIRST_GROUP ? 0 : 1
        });

        model.edges.push({
          from: Math.floor(Math.random() * (NUM_NODES - 1)),
          to: Math.floor(Math.random() * (NUM_NODES - 1))
        });
      }

      let graph = new ElGrapho({
        container: document.getElementById('container'),
        model: ElGrapho.layouts.Chord(model),
        width: 500,
        height: 500,
        debug: false,
        darkMode: true,
        glowBlend: 0.2,
        edgeSize: 0.01
      });

    </script>
  </body>
</html>